<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>停车位管理 - 智慧小区管理系统</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        body { padding: 24px; background: #f5f7fa; }
        .toolbar { margin-bottom: 16px; }
        .layui-table th, .layui-table td { text-align: center; }
        .layui-table-cell {
            height: auto;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header" style="font-size:1.2em;font-weight:bold;">停车位管理</div>
    <div class="layui-card-body">

        <!-- 搜索表单 -->
        <form class="layui-form toolbar" id="searchForm">
            <div class="layui-inline">
                <input type="text" name="parkingSpotId" placeholder="停车位ID" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" name="parkingSpotLocation" placeholder="位置描述" class="layui-input">
            </div>
            <div class="layui-inline">
                <select name="parkingSpotStatus">
                    <option value="">所有状态</option>
                    <option value="1">空闲</option>
                    <option value="2">占用</option>
                </select>
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="search"><i class="layui-icon layui-icon-search"></i> 查询</button>
            <button class="layui-btn layui-btn-primary" type="reset"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
        </form>

        <!-- 工具栏 -->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加车位</button>
            </div>
        </script>

        <!-- 数据表格 -->
        <table class="layui-table" id="parkingSpotTable" lay-filter="parkingSpotFilter"></table>

        <!-- 操作栏模板 -->
        <script type="text/html" id="tableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i> 编辑</a><br>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> 删除</a><br>
            {{# if(d.parkingSpotStatus === 2) { }}
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="release">释放车位</a>
            {{# } }}
        </script>

        <!-- 添加/编辑弹窗 -->
        <div id="editParkingSpot" style="display: none; padding: 10px;">
            <form class="layui-form" id="editForm" lay-filter="editForm">
                <input type="hidden" name="parkingSpotId">

                <div class="layui-form-item">
                    <label class="layui-form-label">位置描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="parkingSpotLocation" required lay-verify="required" placeholder="请输入停车位位置" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select name="parkingSpotStatus" lay-verify="required">
                            <option value="">请选择状态</option>
                            <option value="1">空闲</option>
                            <option value="2">占用</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="saveFormSubmit">提交</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
    layui.use(['table', 'form', 'layer', 'jquery'], function () {

        const table = layui.table;
        const form = layui.form;
        const layer = layui.layer;
        const $ = layui.jquery;

        // 全局设置ajax请求头
        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                if (data && data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });

        let index;

        // 初始化表格
        table.render({
            elem: '#parkingSpotTable',
            url: '/parkingSpot/queryPage',
            method: 'get',
            page: true,
            parseData: function (res) {
                return {
                    code: res.code,
                    msg: res.message,
                    count: res.data.total,
                    data: res.data.list
                };
            },
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'message',
                countName: 'count',
                dataName: 'data'
            },
            toolbar: '#toolbarDemo',
            cols: [[
                { field: 'parkingSpotId', title: '停车位ID' },
                { field: 'parkingSpotLocation', title: '停车位位置' },
                { field: 'parkingSpotStatus', title: '状态', templet: function(d) {
                        return d.parkingSpotStatus === 1 ? '空闲' : '占用';
                    }},
                { title: '操作', toolbar: '#tableBar', width: 150, align: 'center' }
            ]]
        });

        // 监听工具栏事件
        table.on('toolbar(parkingSpotFilter)', function (obj) {
            if (obj.event === 'add') {
                form.val('editForm', {
                    parkingSpotId: '',
                    parkingSpotLocation: '',
                    parkingSpotStatus: ''
                });
                index = layer.open({
                    title: '添加停车位',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    content: $('#editParkingSpot'),
                    area: ['500px', '300px']
                });
            }
        });

        // 监听行操作
        table.on('tool(parkingSpotFilter)', function (obj) {
            const data = obj.data;

            if (obj.event === 'edit') {
                form.val('editForm', data);
                index = layer.open({
                    title: '编辑停车位',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    content: $('#editParkingSpot'),
                    area: ['500px', '300px']
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除该车位吗？', function (index) {
                    $.post('/parkingSpot/delete', { id: data.parkingSpotId }, function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功');
                            table.reload('parkingSpotTable');
                        } else {
                            layer.msg('删除失败: ' + res.message);
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'release') {
                layer.confirm('确定释放该车位吗？', function (index) {
                    $.post('/parkingSpot/release', {
                        parkingSpotId: data.parkingSpotId
                    }, function (res) {
                        if (res.code === 0) {
                            layer.msg('释放成功');
                            table.reload('parkingSpotTable');
                        } else {
                            layer.msg('释放失败: ' + res.message);
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 提交添加/编辑表单
        form.on('submit(saveFormSubmit)', function (data) {
            var field = data.field;
            var url = field.parkingSpotId ? '/parkingSpot/update' : '/parkingSpot/add';
            $.post(url, field, function (res) {
                if (res.code === 0) {
                    layer.msg(field.parkingSpotId ? '更新成功' : '添加成功');
                    table.reload('parkingSpotTable');
                    layer.close(index);
                } else {
                    layer.msg(res.message || '操作失败');
                }
            });
            return false;
        });

        // 查询按钮点击事件
        form.on('submit(search)', function (data) {
            table.reload('parkingSpotTable', {
                where: data.field,
                page: { curr: 1 }
            });
            return false;
        });

        // 重置按钮点击事件
        $(document).on('click', '.layui-btn-primary[type="reset"]', function () {
            $('#searchForm')[0].reset();
            form.render();
            table.reload('parkingSpotTable', {
                where: {},
                page: { curr: 1 }
            });
            return false;
        });
    });
</script>

</body>
</html>
